<template>
    <div class="options-panel">
        <div v-show="currentPanel == 'property'">
            <div class="panel-from">

                <div class="panel-form-item">
                    <div class="item-label">字段名</div>
                    <div class="item-input">
                        <a-input v-model:value="selectItem.field" placeholder="请输入" />
                    </div>
                </div>

                <div class="panel-form-item check">
                    <div class="item-label">范围选择</div>
                    <div class="item-input">
                        <a-switch size="small" v-model:checked="selectItem.componentProps.range" @change="rangeChange" />
                    </div>
                </div>

                <div class="panel-form-item">
                    <div class="item-label">占位提示</div>
                    <div class="item-input">
                        <a-input v-model:value="selectItem.componentProps.placeholder" placeholder="请输入" />
                    </div>
                </div>

                <div class="panel-form-item" v-if="selectItem.componentProps.range">
                    <div class="item-label">占位提示2</div>
                    <div class="item-input">
                        <a-input v-model:value="selectItem.componentProps.placeholder2" placeholder="请输入" />
                    </div>
                </div>

                <div class="panel-form-item">
                    <div class="item-label">尺寸</div>
                    <div class="item-input">
                        <a-select v-model:value="selectItem.componentProps.size" placeholder="请选择" style="width:100%">
                            <a-select-option value="large">large</a-select-option>
                            <a-select-option value="middle">middle</a-select-option>
                            <a-select-option value="small">small</a-select-option>
                        </a-select>
                    </div>
                </div>

                <!-- placement -->
                <div class="panel-form-item">
                    <div class="item-label">弹出位置</div>
                    <div class="item-input">
                        <a-select v-model:value="selectItem.componentProps.placement" placeholder="请选择"
                            style="width:100%">
                            <a-select-option value="topLeft">topLeft</a-select-option>
                            <a-select-option value="topRight">topRight</a-select-option>
                            <a-select-option value="bottomLeft">bottomLeft</a-select-option>
                            <a-select-option value="bottomRight">bottomRight</a-select-option>
                        </a-select>
                    </div>
                </div>

                <!-- status -->
                <div class="panel-form-item">
                    <div class="item-label">状态</div>
                    <div class="item-input">
                        <a-select v-model:value="selectItem.componentProps.status" placeholder="请选择"
                            style="width:100%">
                            <a-select-option value="">默认</a-select-option>
                            <a-select-option value="error">错误</a-select-option>
                            <a-select-option value="warning">警告</a-select-option>
                        </a-select>
                    </div>
                </div>

                <div class="panel-form-item check">
                    <div class="item-label">有边框</div>
                    <div class="item-input">
                        <a-switch size="small" v-model:checked="selectItem.componentProps.bordered" />
                    </div>
                </div>

                <div class="panel-form-item check">
                    <div class="item-label">可清空</div>
                    <div class="item-input">
                        <a-switch size="small" v-model:checked="selectItem.componentProps.allowClear" />
                    </div>
                </div>

                <div class="panel-form-item check">
                    <div class="item-label">禁用</div>
                    <div class="item-input">
                        <a-switch size="small" v-model:checked="selectItem.componentProps.disabled" />
                    </div>
                </div>

                <div class="panel-form-item check">
                    <div class="item-label">隐藏</div>
                    <div class="item-input">
                        <a-switch size="small" v-model:checked="selectItem.componentProps.hidden" />
                    </div>
                </div>

            </div>
        </div>

        <div v-show="currentPanel == 'style'">
        </div>

    </div>
</template>

<script>

export default {
    name: "datePickerOptions",
    props: {
        currentPanel: {
            type: String,
            default: "property"
        },
        selectItem: {
            type: Object,
        }
    },
    data() {
        return {
            item: {},
        }
    },
    methods: {
        rangeChange(value) {
            if (value) {
                this.selectItem.componentProps.placeholder = '开始时间'
            } else {
                this.selectItem.componentProps.placeholder = '请选择时间'
            }
        }
    },
    mounted() {
    },
    created() {
    },
}
</script>

<style>
</style>